<template>
  <div class="container">
    <div class="container-content" v-if="mounted">
      <FormRender
        ref="formRenderRef"
        v-model="formData"
        v-model:config="formDef"
      />
      <footer class="el-dialog__footer">
        <el-button
          v-loading="loading"
          type="primary"
          @click="saveForm"
          :disabled="loading"
          icon="circle-check"
          >保存</el-button
        >
      </footer>
    </div>
  </div>
</template>
<script setup lang="ts" name="DefFormRender">
import type { FormDesignerModel } from "@/views/design/form/FormComponentMixin";
import FormRender from "@/views/design/form/FormRender.vue";
import { useRoute } from "vue-router";
import { Ref, provide, ref } from "vue";
import { onMounted } from "vue";
import { getObj } from "@/api/flow/form";
import { validateNull } from "@/utils/validate";
import { parseWithString } from "@/utils/process";
import { useMessage } from "@/hooks/message";
import { addObj } from "@/api/flow/formdata";

const formRenderRef = ref(null);
const formDef = ref<FormDesignerModel>({
  conf: {
    labelPosition: "right", //标签位置
    labelWidth: 80, //标签宽度，
    size: "default"
  },
  components: []
});
const formData = ref(null);
const mounted = ref(false);
const formId = ref("");
const loading = ref(false);
const tableListRefs = ref<any>({});
const componentRefs = ref<any>({});
provide("tableListRefs", tableListRefs);
provide("componentRefs", componentRefs);

onMounted(() => {
  const route = useRoute();
  const path = route.path as string;
  const params = validateNull(route.params) ? route.query : route.params;
  console.log("params", route);
  if (params.formId) {
    formId.value = params.formId as string;
  } else if (path.indexOf("formId") !== -1) {
    const pathParams = path.substring(path.indexOf("?") + 1).split("&");
    formId.value = pathParams[0].replace("formId=", "");
  } else {
    formId.value = route.meta?.query?.formId;
  }
  console.log(formId.value);
  getObj(formId.value).then(res => {
    if (res.code) {
      const formInfo = parseWithString(res.data.formInfo);
      if (formInfo.conf && formInfo.components) {
        formDef.value = formInfo;
      }
      mounted.value = true;
    }
  });
});

const saveForm = async () => {
  try {
    loading.value = true;
    let formData = await formRenderRef.value.getFormData();
    if (validateNull(formData)) {
      useMessage().warning("请输入表单信息");
      return;
    }
    const params = {
      formId: formId.value,
      formData: JSON.stringify(formData)
    };
    addObj(params).then(res => {
      if (res.code === 200) {
        useMessage().success("表单数据保存成功");
      } else {
        useMessage().error(res.msg);
      }
    });
  } catch (err: any) {
    useMessage().error(err.msg);
  } finally {
    loading.value = false;
  }
};
</script>
<style lang="scss" scoped>
.el-dialog__footer {
  padding-top: 0px !important;
  text-align: center;

  .dialog-footer {
    text-align: center;
  }
}
</style>
